<template>
  <div class="tree-node">
    <div class="person-card" @click="handleClick" :class="{ 'selected': isSelected }">
      <div class="person-header" :style="{ backgroundColor: node.gender === 1 ? '#2196F3' : '#E91E63' }">
        <div class="person-name">{{ node.name }}</div>
        <div class="person-gender">{{ node.gender === 1 ? '男' : '女' }}</div>
      </div>
      <div class="person-content">
        <div class="person-info">出生: {{ formatDate(node.birthDate) || '未知' }}</div>
        <div v-if="node.deathDate" class="person-info">逝世: {{ formatDate(node.deathDate) }}</div>
        <div class="person-info">第 {{ node.generation }} 代</div>
      </div>

      <!-- 操作按钮组 -->
      <div class="operation-buttons" v-if="isSelected">
        <el-button-group class="button-group">
          <el-button
            type="primary"
            link
            @click.stop="handleCommand('view')"
          >查看</el-button>
          <el-button
            type="primary"
            link
            @click.stop="handleCommand('edit')"
          >编辑</el-button>
          <el-dropdown trigger="click" @command="handleAddRelative">
            <el-button type="primary" link>
              添加关系<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="addFather">添加父亲</el-dropdown-item>
                <el-dropdown-item command="addMother">添加母亲</el-dropdown-item>
                <el-dropdown-item command="addSpouse">添加配偶</el-dropdown-item>
                <el-dropdown-item command="addChild">添加子女</el-dropdown-item>
                <el-dropdown-item command="addSibling">添加兄弟姐妹</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button
            type="danger"
            link
            @click.stop="handleCommand('delete')"
          >删除</el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 子女 -->
    <div v-if="node.children && node.children.length > 0" class="children-container">
      <div class="children-line"></div>
      <div class="children-nodes">
        <TreeNode
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          :selected-id="selectedId"
          @node-click="(node) => $emit('node-click', node)"
          @view="(node) => $emit('view', node)"
          @edit="(node) => $emit('edit', node)"
          @add-relative="(payload) => $emit('add-relative', payload)"
          @delete="(node) => $emit('delete', node)"
          @edit-success="() => $emit('edit-success')"
        />
      </div>
    </div>

    <!-- 详细信息弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="成员详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ node.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ node.gender === 1 ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ formatDate(node.birthDate) || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="逝世日期">{{ node.deathDate ? formatDate(node.deathDate) : '健在' }}</el-descriptions-item>
        <el-descriptions-item label="代数">第 {{ node.generation }} 代</el-descriptions-item>
        <el-descriptions-item label="子女">
          <template v-if="node.children && node.children.length > 0">
            <div v-for="child in node.children" :key="child.id">{{ child.name }}</div>
          </template>
          <template v-else>无</template>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEdit">编 辑</el-button>
      </template>
    </el-dialog>

    <!-- 编辑表单 -->
    <MembersForm ref="formRef" @success="handleFormSuccess" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import MembersForm from './MembersForm.vue'

const props = defineProps<{
  node: {
    id: number
    name: string
    gender: number
    birthDate: string
    deathDate?: string
    generation: number
    children?: any[]
  }
  selectedId?: number
}>()

const emit = defineEmits<{
  (e: 'node-click', node: any): void
  (e: 'view', node: any): void
  (e: 'edit', node: any): void
  (e: 'add-relative', payload: { node: any; relationType: string }): void
  (e: 'delete', node: any): void
  (e: 'edit-success'): void
}>()

const detailVisible = ref(false)
const formRef = ref()

// 是否选中当前节点
const isSelected = computed(() => {
  return props.selectedId === props.node.id
})

// 格式化日期
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '';
  return dateString;
}

const handleClick = () => {
  emit('node-click', props.node)
}

const handleCommand = async (command: string) => {
  switch (command) {
    case 'view':
      detailVisible.value = true
      break
    case 'edit':
      handleEdit()
      break
    case 'delete':
      try {
        await ElMessageBox.confirm(
          '确定要删除该成员吗？此操作将同时删除相关的家庭关系。',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        emit('delete', props.node)
      } catch {
        // 用户取消删除
      }
      break
  }
}

const handleAddRelative = (command: string) => {
  emit('add-relative', { node: props.node, relationType: command.replace('add', '').toLowerCase() })
}

// 编辑成员
const handleEdit = () => {
  formRef.value?.open('update', props.node.id)
  detailVisible.value = false
}

// 表单提交成功后的回调
const handleFormSuccess = () => {
  // 通知父组件刷新数据
  emit('edit-success')
}
</script>

<style scoped>
.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px;
  position: relative;
}

.person-card {
  width: 180px;
  border-radius: 8px;
  overflow: visible;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.person-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.person-card.selected {
  box-shadow: 0 0 0 2px var(--el-color-primary), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.person-header {
  padding: 10px;
  color: white;
  text-align: center;
}

.person-name {
  font-size: 16px;
  font-weight: bold;
}

.person-gender {
  font-size: 12px;
  margin-top: 4px;
}

.person-content {
  padding: 10px;
}

.person-info {
  font-size: 12px;
  color: #666;
  margin: 4px 0;
}

.operation-buttons {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  white-space: nowrap;
  margin-left: 8px;
  pointer-events: auto;
}

.operation-buttons::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-style: solid;
  border-color: transparent white transparent transparent;
  z-index: 1000;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.children-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.children-line {
  width: 2px;
  height: 20px;
  background-color: #666;
  margin-bottom: 10px;
}

.children-nodes {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

:deep(.el-button-group .el-button--primary) {
  background-color: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  width: 100%;
  justify-content: flex-start;
}

:deep(.el-button-group .el-button--primary:hover) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

:deep(.el-button-group .el-button--danger) {
  background-color: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  width: 100%;
  justify-content: flex-start;
}

:deep(.el-button-group .el-button--danger:hover) {
  background-color: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

:deep(.el-dropdown) {
  width: 100%;
}

:deep(.el-dropdown .el-button) {
  width: 100%;
  justify-content: space-between;
}

:deep(.el-dropdown-menu) {
  min-width: 120px;
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  font-size: 14px;
}

:deep(.el-descriptions) {
  margin: 20px 0;
}

:deep(.el-descriptions__label) {
  width: 100px;
  background-color: var(--el-fill-color-light);
}

:deep(.el-descriptions__content) {
  padding: 12px 16px;
}
</style> 